<template>
  <div>
    <section>
      <div class="header">
        <div class="area">{{$t('dcrSearch.pay_record')}}</div>
        <div class="excel" @click="excel">
          <spinner v-if="excelLoading"/>
          <span v-else>{{$t('income.excel')}}</span>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th @click="sortChange('create_time', 1)" class="pointer">
              {{$t('payhistory.paydata')}}
              <i class="iconfont" :class="[sort1==='desc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
              <el-tooltip effect="dark" placement="top">
                <div slot="content" v-html="$t('payhistory.time_info')"></div>
                <i class="iconfont icon-wenhao"/>
              </el-tooltip>
            </th>
            <th @click="sortChange('status', 2)" class="pointer">
              {{$t('mill.status')}}
              <i class="iconfont" :class="[sort2==='desc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th @click="sortChange('pay_address', 3)" class="pointer">
              {{$t('payhistory.payaddress')}}
              <i class="iconfont" :class="[sort3==='desc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th @click="sortChange('pay_amount', 4)" class="pointer">
              {{$t('payhistory.paynum')}}
              <i class="iconfont" :class="[sort4==='desc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th @click="sortChange('total_fee', 5)" class="pointer">
              {{$t('payhistory.pay_fees')}}
              <i class="iconfont" :class="[sort5==='desc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th @click="sortChange('trade_tx_id', 6)" class="pointer">
              {{$t('payhistory.trade_tx_id')}}
              <i class="iconfont" :class="[sort6==='desc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-if="total_count">
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{item.create_time}}</td>
              <td>{{item.status===0 ? $t('payhistory.pay_no') : (item.status===1 ? $t('payhistory.paying') : (item.status===2 ? $t('payhistory.pay_complete') : (item.status===3 ? $t('payhistory.pay_fail') : (item.status===4 ? $t('payhistory.audit') : $t('unit.no_data')))))}}</td>
              <td>
                <el-tooltip placement="top" effect="light" :disabled="item.showTooltip">
                  <div slot="content">{{item.pay_address}}</div>
                  <span class="pointer text-truncate" :data-tooltip="index">{{item.pay_address}}</span>
                </el-tooltip>
              </td>
              <td>{{item.pay_amount}}</td>
              <td>{{item.total_fee | num8}}</td>
              <td>
                <el-tooltip placement="top" effect="light">
                  <div slot="content">{{item.trade_tx_id}}</div>
                  <span class="pointer text-truncate">{{item.trade_tx_id}}</span>
                </el-tooltip>
              </td>
            </tr>
          </template>
          <template v-else>
            <tr><td colspan="6">{{$t('unit.no_data')}}</td></tr>
          </template>
        </tbody>
      </table>
    </section>
    <Pagination :page="page | num" :totalCount="total_count | num" :pageSize="pagesize" :disabled="tableLoading" :currentChange="currentChange" layout="total, prev, pager, next"/>
  </div>
</template>
<script>
import fileDownload from 'js-file-download';
import Pagination from '@/components/Pagination';
import { paymentLists, paymentExcel } from '@/api';
import { mapGetters } from 'vuex';
import Spinner from '@/components/Spinner';

export default {
  components: {
    Pagination,
    Spinner,
  },
  data() {
    return {
      innovate: [],
      innovate_count: 0,
      page: 1,
      pagesize: 10,
      total_count: 0,
      order_by: 'create_time',
      sort: 'desc',
      tableLoading: false,
      tableData: [],
      sort1: 'desc',
      sort2: 'desc',
      sort3: 'desc',
      sort4: 'desc',
      sort5: 'desc',
      sort6: 'desc',
      click_index: '',
      excelLoading: false,
    };
  },
  created() {
    this.getPaymentLists();
  },
  computed: {
    ...mapGetters(['subCuid', 'token', 'obAccessKey', 'subCoinType', 'language']),
  },
  methods: {
    excel() {
      this.excelLoading = true;
      paymentExcel({
        puid: this.subCuid,
        access_key: this.obAccessKey,
        token: this.token,
        language_type: this.language === 'zh' ? 'cn' : 'en',
      }).then((res) => {
        try {
          const JSONdata = JSON.parse(String.fromCharCode.apply(null, new Uint8Array(res.data)));
          if (JSONdata.errcode) {
            this.$message.error(this.$t(`api.${JSONdata.errcode}`));
          } else {
            fileDownload(res.data, 'payment.xls');
          }
        } catch (err) {
          fileDownload(res.data, 'payment.xls');
        }
        this.excelLoading = false;
      }).catch((err) => {
        this.excelLoading = false;
        if (err.data && err.data.errcode) {
          this.$message.error(this.$t(`api.${err.data.errcode}`));
        } else {
          this.$message.error(this.$t('error.catchError'));
        }
      });
    },
    sortChange(val, sortIndex) {
      this.order_by = val;
      if (this[`sort${sortIndex}`] === 'asc') {
        this.sort = 'desc';
        this[`sort${sortIndex}`] = 'desc';
      } else {
        this.sort = 'asc';
        this[`sort${sortIndex}`] = 'asc';
      }
      this.getPaymentLists();
    },
    currentChange(page) {
      this.page = page;
      this.getPaymentLists();
    },
    getPaymentLists() {
      if (this.tableLoading) {
        return;
      }
      this.tableLoading = true;
      paymentLists({
        puid: this.subCuid,
        limit: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        sort: this.sort,
        status: this.status,
      }).then((response) => {
        if (response.data.status === 1) {
          this.tableData = response.data.data.list;
          this.tableData.forEach((v, i) => {
            this.tableData[i].showTooltip = false;
          });
          this.$nextTick(() => {
            setTimeout(() => {
              const tooltipDoms = document.querySelectorAll('[data-tooltip]');
              Array.from(tooltipDoms).forEach((item, index) => {
                this.tableData[index].showTooltip = (item.scrollWidth <= item.clientWidth);
                this.$forceUpdate();
              });
            });
          });
          this.total_count = response.data.count;
        }
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    },
  },
  watch: {
    subCoinType(v) {
      if (v !== 'btc') {
        this.$router.push('/pools/income');
      }
    },
    subCuid() {
      this.getPaymentLists();
    },
  },
};
</script>
